<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <title>我的位置</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        #info {
            margin-top: 10px;
        }
        #container{
            min-width:600px;
            min-height:767px;
            padding-bottom: 30px;
        }
    </style>
    <style>
        .bottom-info{
            position: fixed;
            left:0;
            right:0;
            bottom:0;
            padding:15px 10px;
            font-size:14px;
            background: #ff7e00;
            color:#fff;

        }
        .shop-name{
            display:block ;
            margin:0 0 3px 0;
            padding:0;
            font-size:15px;
            font-weight:700;
        }
        .btn-box{
            margin-top:15px;
            text-align: center;
        }
        .btn-to-map{
            display: inline-block;
            padding:3px 10px 3px 25px;
            margin:0 10px;
            border:1px solid #fff;
            border-radius:5px;
            color:#fff;
            text-decoration: none;
        }
        .baidu{
            background: url("{{asset('assets/images/tengxun.png')}}") no-repeat;
            background-position: 5px center;
            background-size:14px 14px;
        }
        .gaode{
            background: url("{{asset('assets/images/gaode.png')}}") no-repeat left center;
            background-position: 5px center;
            background-size:14px 14px;
        }
        .icon-to:after{
            content:'\27A5';
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OJ5BZ-2SKK4-DR6UI-XRMWT-T3F4S-J7BLZ"></script>
    <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

    <script>
        var geolocation = new qq.maps.Geolocation("OJ5BZ-2SKK4-DR6UI-XRMWT-T3F4S-J7BLZ", "myapp");

        var options = {timeout: 1000};

        function showPosition(position) {
            data = position.lat + ',' + position.lng;
        };

        geolocation.getLocation(showPosition, null, options)


        var init = function() {
            var center = new qq.maps.LatLng(36.268961,120.392245);
            var map = new qq.maps.Map(document.getElementById('container'),{
                center: center,
                zoom: 16
            });
            var infoWin = new qq.maps.InfoWindow({
                map: map
            });
            var marker = new qq.maps.Marker({
                position: center,
                map: map
            });
            infoWin.open();
            infoWin.setContent('地址:山东省青岛市城阳区长城南路6号首创空港国际中心33号楼');
            infoWin.marker();
            infoWin.setPosition(center);
        }
    </script>
</head>
<body onload="init()">
<div id="container" style=""></div>
<div id="info">
    <div class="bottom-info">
        <h4 class="shop-name">我的位置</h4>
        <div class="btn-box">
        </div>
    </div>
</div>
</body>
</html>
